<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>客服中心</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">


    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>

    <!--    <script src="http://api.map.baidu.com/api?key=abcd&v=1.0&services=true"></script>-->
    <!--chrome 不行 edge 就可以 -->
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=CKHzX2GhFaVMH7XKwBej0gdq9FzGrT6V"></script>

    <script src="//mapv.baidu.com/build/mapv.min.js"></script>
    <!--    <script src="static/common.js"></script>-->
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.139/dist/mapvgl.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="../data/sensor.js"></script>
    <script src="../lib/layui/layui.js"></script>

</head>
<body>
<div style="border-radius:8px; border: 1px solid royalblue;  width: 450px; position: absolute; z-index: 9999; background-color: #0088bb; ">
    <h1 style="text-align:  center; color: #FFFFFF;" onclick="initBaiduMap()">安全生产信息引导发布系统安装列表
        <span style="font-weight: lighter; float: right;  cursor: hand;" onclick="showOrHide(1)"
              id="span_showOrHide">︾</span>
    </h1>
    <div id="showMines">
        <table class="layui-table">
            <thead>
            <th>编号</th>
            <th>矿名</th>
            <th>故障/正常</th>
            <th>超限</th>
            <th>操作</th>
            </thead>
            <tbody id="showMines_table_body">

            </tbody>
        </table>
        <span style="color:#fff;">注：点击定位位置和查看详细</span>
        <button class="layui-btn-normal" onclick="manual()">刷新所有</button>
        <img src="../images/ref.png" style="width: 18px; height: 18px;" onclick="manual()" />
    </div>
</div>
<div id="container"></div>
<script src="../lib/layui/layui.all.js"></script>
<script type="text/javascript">

    function manual()
    {
        sensorServer.manualRef({"id":0});
        layer.msg("已刷新！");
    }
    let showdiv = true;

    function showOrHide() {
        if (showdiv) {
            $("#showMines").hide();
            showdiv = false;
            $("#span_showOrHide").html("＜");
        } else {
            $("#showMines").show();
            showdiv = true;
            $("#span_showOrHide").html("︾");

        }
    }
</script>
<script type="text/javascript">
    //=====================业务代码==================================
    function getMineListPosition() {
        let dataArr = [];

        function DataArrDetails(geometry, color, size, customerId, customerInfo) {
            this.geometry = geometry;
            this.color = color;
            this.size = size;
            this.customerId = customerId;
            this.customerInfo = customerInfo;
        }

        let resultData = sensorServer.getMinesList({"page": 1, "rows": 10}).data;

        /*[{"id": 1, "mineName": "北京测试", "longitude": 117.666, "latitude": 39.666}
            , {"id": 2, "mineName": "天津测试", "longitude": 118.1444, "latitude": 39.666}
            , {"id": 3, "mineName": "天津测试", "longitude": 118.1666, "latitude": 39.666}
            , {"id": 4, "mineName": "天津测试", "longitude": 118.2666, "latitude": 39.666}
            , {"id": 5, "mineName": "天津测试", "longitude": 118.3666, "latitude": 39.666}
            , {"id": 6, "mineName": "天津测试", "longitude": 118.4666, "latitude": 39.666}
            , {"id": 7, "mineName": "天津测试", "longitude": 118.5666, "latitude": 39.666}
            , {"id": 8, "mineName": "天津测试", "longitude": 118.6666, "latitude": 39.666}
            , {"id": 9, "mineName": "天津测试", "longitude": 118.7666, "latitude": 39.666}
            , {"id": 10, "mineName": "天津测试", "longitude": 118.8666, "latitude": 39.666}
        ]; */
        for (let i = 0; i < resultData.length; i++) {
            let info = resultData[i];
            let dataDetails = new DataArrDetails();
            dataDetails.size = 8;
            dataDetails.color = "#0fd41e";
            // dataDetails.color = "#1a28d4";
            let errCount = 0;
            let overRunCount = 0;
            let total = 0;
            if (info.lastReportDetails != null) {
                let sensorListData = JSON.parse(info.lastReportDetails);
                total = sensorListData.total;
                let dataList = sensorListData.data;

                for (let j = 0; j < dataList.length; j++) {
                    if (dataList[j].deviceConnect != null && dataList[j].ledConnect != null) {
                        if (dataList[j].deviceConnect == false || dataList[j].deviceConnect == 0 ||
                            dataList[j].ledConnect == false || dataList[j].ledConnect == 0) {
                            errCount++;
                        }
                    }
                }
                if (errCount > 0) {
                    dataDetails.color = "#eaea22";
                }
            }

            //=======设置左侧菜单显示
            let showDetailsModel = "<a style='color:#ff802b;text-decoration:underline;' onclick='clickShowDetails(this)'>详情</a>";
            let Tolocate = "&nbsp;<a style='color:#9631ff;text-decoration:underline; background-image: url('')' onclick='' >定位</a>";
            let tbodystr = "<tr data-info='" + JSON.stringify(info) + "'  onclick='clicktr(this)'>" +
                "<td>" + info.id + "</td>" +
                "<td>" + info.mineName + "</td>" +
                "<td>" + errCount + "/" + total + "</td>" +
                "<td>" + 0 + "</td>" +
                "<td>" + showDetailsModel + Tolocate + "</td>" +
                "</tr>"
            $("#showMines_table_body").append(tbodystr);
            //=======设置左侧菜单显示
            dataDetails.geometry = {
                type: 'point',
                coordinates: [info.longitude, info.latitude]
            }
            dataDetails.customerId = info.id;
            dataDetails.customerInfo = info;
            dataArr.push(dataDetails);

            //
        }
        return dataArr;
    }

    function clickShowDetails(e) {
        debugger;
        let info = JSON.parse(e.parentNode.parentNode.getAttribute('data-info'));
        openWindowShowInfo(info.mineName, info.id);
    }

    function clicktr(obj) {
        let trInfo = JSON.parse(obj.getAttribute("data-info"));
        //map.clearOverlays();
        var new_point = new BMapGL.Point(trInfo.longitude, trInfo.latitude);
        var marker = new BMapGL.Marker(new_point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.panTo(new_point);

    }

    //打开窗口显示详细信息
    function openWindowShowInfo(titleText, id) {
        let titleInfo = "详细信息";
        if (titleText != "") {
            titleInfo = titleText;
        }
        let skinStr = 'layui-layer-lan';
        let url = "mine_details.html?id=" + id;  //"http://localhost:9001/map_warningList.html";
        layer.open({
            skin: skinStr, // 'layui-layer-lan', // skin: 'layui-layer-demo', //样式类名
            type: 2
            , title: titleInfo //不显示标题栏
            , closeBtn: 1
            , maxmin: true
            , fixed: false
            , area: ['1100px', '600px']
            , shade: 0.2
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            //,btn: '关闭全部'
            , btnAlign: 'c'
            , move: true
            , moveType: 0 //拖拽模式，0或者1
            , resize: true
            , content: url //'<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
        });
    }

    //=====================业务代码==================================
</script>
<script type="text/javascript">
    var map = new BMapGL.Map("container");
    $(function () {


        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        // 创建地图实例
        var point = new BMapGL.Point(116.404, 39.915);

        var view = new mapvgl.View({
            map: map
        });
        var cities = [
            '北京',
            '石家庄',
            '上海',
            '重庆',
            '太原',
            '呼和浩特'
        ];
        //var colors = ['#f00', '#ff0', '#0ff', '#00f'];
        var data = null;
        //     cities.map((city, index) => {
        //     var cityCenter = mapv.utilCityCenter.getCenterByCityName(city);
        //     return {
        //         geometry: {
        //             type: 'Point',
        //             coordinates: [cityCenter.lng, cityCenter.lat]
        //         },
        //         color: colors[index % 4],
        //         // 圆的半径
        //         size: 8
        //     };
        // });
        data = getMineListPosition();

        for (let i = 0; i < data.length; i++) {
            createText(
                data[i].customerInfo.id,
                data[i].customerInfo.mineName,
                data[i].geometry.coordinates[0],
                data[i].geometry.coordinates[1]
            );
        }

        // var simpleLayer = new mapvgl.CircleLayer({
        //     // 默认类型，绘制简单圆
        //     type: 'simple',
        //     enablePicked: true,
        //     selectedColor: '#f0f', // 选中项颜色
        //     autoSelect: true, // 根据鼠标位置来自动设置选中项
        //     onClick: (e) => { // 点击事件
        //         console.log(e);
        //         debugger;
        //         alert('点击');
        //     }
        // });

        // view.addLayer(simpleLayer);
        // simpleLayer.setData(data.slice(0, 2));

        //----------------------------------------------
        var waveLayer = new mapvgl.CircleLayer({
            // 绘制带波纹扩散的圆
            type: 'wave',
            // 扩散半径，支持直接设置和回调两种形式
            radius: 20,
            // 周期影响扩散速度，越小越快
            duration: 0.5,
            selectedColor: '#eaea22', // 选中项颜色
            // 拖尾影响波纹数，越大越多
            trail: 1,
            autoSelect: true, // 根据鼠标位置来自动设置选中项
            onClick: (e) => { // 点击事件
                console.log(e);
                alert('点击11');
            }
        });
        view.addLayer(waveLayer);
        waveLayer.setData(data); //data.slice(0, 5)

        for (let i = 0; i < waveLayer.data.length; i++) {
            let info = waveLayer.data[i];
            var point = new BMapGL.Point(info.geometry.coordinates[0], info.geometry.coordinates[1]);
            point.name = 'p_' + info.customerId;
            var marker1 = new BMapGL.Marker(point);         // 将标注添加到地图中
            marker1.name = 'm_' + info.customerId;
            marker1.addEventListener("click", clickPoint);
            map.addOverlay(marker1);
        }


        function clickPoint(e) {
            openWindowShowInfo("", e.target.name.replace("m_", ""));
        }

        //----------------------------------------------
        // var bubbleLayer = new mapvgl.CircleLayer({
        //     // 绘制带泡泡的圆
        //     type: 'bubble',
        //     // 扩散半径，支持直接设置和回调两种形式，size为点的大小
        //     radius(size) {
        //         return 2 * size;
        //     },
        //     // 扩散时间
        //     duration: 1,
        //     // 渐隐时间
        //     trail: 1
        // });
        // view.addLayer(bubbleLayer);
        // bubbleLayer.setData(data.slice(2, 4));

        //----------------------------------------------
        // var breathLayer = new mapvgl.CircleLayer({
        //     // 绘制带泡泡的圆
        //     type: 'breath',
        //     // 扩散半径，支持直接设置和回调两种形式，size为点的大小
        //     radius(size) {
        //         return size;
        //     },
        //     // 显示时间
        //     duration: 3,
        //     // 渐隐时间
        //     trail: 3
        // });
        // view.addLayer(breathLayer);
        // breathLayer.setData(data.slice(6));

        // 创建点坐标

        var marker = new BMapGL.Marker(point);        // 创建点标注
        //map.centerAndZoom(point, 15);
        map.addOverlay(marker);                     // 将标注添加到地图中
        marker.addEventListener("click", function (e) {
            alert("您点击了标注");
        });
        map.centerAndZoom(point, 15);
    })


    function createText(id, textInfo, lng, lat) {
        var opts = {
            position: new BMapGL.Point(lng, lat), // 指定文本标注所在的地理位置
            offset: new BMapGL.Size(15, -10) // 设置文本偏移量
        };
        // 创建文本标注对象
        //var label = new BMapGL.Label('欢迎使用百度地图JSAPI GL版本', opts);
        var label = new BMapGL.Label(textInfo, opts);
        label.setTitle(id + '_' + textInfo);
        // 自定义文本标注样式
        label.setStyle({
            color: 'green',
            borderRadius: '5px',
            borderColor: '#ccc',
            padding: '5px',
            fontSize: '12px',
            height: '15px',
            lineHeight: '15px',
            fontFamily: '微软雅黑'
        });
        label.addEventListener('click', function (e) {

            openWindowShowInfo(textInfo, e.target.getTitle().split('_')[0]);
        });
        map.addOverlay(label);
    }

    function initBaiduMap() {
        var point = new BMapGL.Point(105.291, 37.094);
        map.centerAndZoom(point, 5);
        map.enableScrollWheelZoom(true);
        map.addEventListener('click', function (e) {
            var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
            var gc = new BMapGL.Geocoder();
            gc.getLocation(point, function (rs) {
                var opts = {
                    title: '行政区划归属',
                    width: 220,
                    height: 92
                };
                var infoStr = '<div>省：' + rs.addressComponents.province + '</div>'
                    + '<div>市：' + rs.addressComponents.city + '</div>'
                    + '<div>区：' + rs.addressComponents.district + '</div>';
                var infoWindow = new BMapGL.InfoWindow(infoStr, opts);
                map.openInfoWindow(infoWindow, point);
            });
        });
    }
</script>
</body>
</html>
